<del style="display: block; height: 30px; margin: 20px; text-align: center;">********************************* Carousel 轮播图 *********************************</del>

<!-- Carousel -->
<div id="carousel">
  <div class="carousel-slide" style="background-image: url(/assets/slide.jpg);">
    <a href="#" class="carousel-title">I am Title. 我是标题1</a>
  </div>
  <div class="carousel-slide" style="background-image: url(/assets/slide.jpg);">
    <a href="#" class="carousel-title">I am Title. 我是标题2</a>
  </div>
  <div class="carousel-slide" style="background-image: url(/assets/slide.jpg);">
    <a href="#" class="carousel-title">I am Title. 我是标题3</a>
  </div>
</div>
<!-- END Carousel -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">********************************* search tip 搜索提示 *********************************</del>

<!-- search tips -->
<div class="search-tips">
  <div class="pure-g">
    <p class="tip-info pure-u-1">“关键字”的讲稿搜索结果</p>
  </div>
</div>
<!-- End search tips -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- panel: include a title and a card list -->
<section class="panel">
  <header class="panel-header pure-g clearfix">
    <h1 class="panel-title pure-u-1-2">最新活动</h1>
    <a href="" class="panel-link pure-u-1-2">查看全部</a>
  </header>

  <!-- Card list -->
  <ul class="card-list pure-g">
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
  </ul>
  <!-- END card list -->
</section>
<!-- END panel -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- panel: include a tag-title and a card list -->
<section class="panel">
  <header class="panel-header pure-g clearfix with-hr">
    <h1 class="panel-title pure-u-1">ruby</h1>
  </header>

  <!-- Card list with author -->
  <ul class="card-list pure-g">
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <address class="card-author">
            <a href="#">zack, zhang</a>
          </address>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <address class="card-author">
            <a href="#">zack, zhang</a>
          </address>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <address class="card-author">
            <a href="#">zack, zhang</a>
          </address>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <address class="card-author">
            <a href="#">zack, zhang</a>
          </address>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
  </ul>
  <!-- END card list -->
</section>
<!-- END panel -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- panel: include a tag-title and a tag list -->
<section class="panel panel-for-tag">
  <header class="panel-header pure-g clearfix with-hr">
    <h1 class="panel-title pure-u-1">讲稿标签</h1>
  </header>

  <!-- Tag list -->
  <ul class="tag-list pure-g">
    <li class="tag-list-item">
      <a href="#" class="tag">ruby</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">java</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">javascript</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">html5</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">css3</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">GO</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">C#</a>
    </li>
    <li class="tag-list-item">
      <a href="#" class="tag">ruby on rails</a>
    </li>
  </ul>
  <!-- END tag list -->
</section>
<!-- END panel -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- Pagination -->
<div class="pagination pure-g">
  <ul class="page-list pure-u-1">
    <!-- disabled page-link will be hiddened -->
    <li><a href="#1" class="page-link disabled">&lt;</a></li>
    <li><a href="#1" class="page-link active">1</a></li>
    <li><a href="#2" class="page-link">2</a></li>
    <li><a href="#3" class="page-link">3</a></li>
    <li class="page-ellipsis">···</li>
    <li><a href="#8" class="page-link">8</a></li>
    <li><a href="#3" class="page-link page-next">&gt;</a></li>
  </ul>
</div>
<!-- END Pagination -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- activities details info -->
<div class="event-details">
  <div class="pure-g">
    <article class="event pure-u-1 pure-u-lg-2-3">
      <header class="event-header pure-g">
        <div class="pure-u-1 pure-u-md-19-24 pure-u-lg-3-5">
          <div class="event-cover">
            <img src="/assets/placeholder.png" alt="" style="background: orange;">
          </div>
        </div>
        <div class="event-info pure-u-1 pure-u-lg-2-5">
          <h1 class="event-title">第27次GZRuby活动</h1>
          <time class="event-date">
            <i class="icon-time"></i>2015-10-23 18:00～2015-10-23 20:00
          </time>
          <p class="event-position">
            <i class="icon-position"></i>活动地点：广州珠江新城碧海湾
          </p>
          <p class="event-slides-num"><i class="icon-book"></i>讲稿数量：4</p>
          <div class="event-action">
            <a href="#" class="btn">上传讲稿</a><a href="#" class="btn btn-warning">收藏</a>
          </div>
        </div>
      </header>

      <!-- panel: include a tag-title and a tag list -->
      <section class="panel panel-for-article">
        <header class="panel-header with-hr pure-g clearfix">
          <h1 class="panel-title pure-u-1">活动内容</h1>
        </header>

        <section class="event-content">
          <h2>Hello Rubyist! </h2>

          <p>阔别大家已经一个多月了(上次活动链接)，在度过了辞旧迎新的农历新年之后，大家是否已经重新踏上征途，完全恢复作战状态？在过去的这段时间里，我们 Ruby 的世界也是辞旧迎新：Ruby 1.9.3 宣布不再维护，Ruby 2.2 释出，Rails 4.2 释出，Passenger 5 的正式版更是在吊足大家的胃口之后于上个月正式发布…… </p>

          <p>作为用为人先的 Rubyist 们，你们是否已经开始在你们的生产环境中用上了这些最新发布的武器呢？Ruby 2.2中的垃圾回收，Rails 4.2 中的新成员——ActiveJob 以及 Mail Preview，Passenger 5 中宣称的更快好省的性能，你们是否已经尝过鲜了？欢迎来跟我们一起分享哦！ </p>

          <p>羊年的第一场 <strong>GZRuby</strong> 的聚会将定于 4 月 17 号（星期五），新的时间定为当天晚上的 19：00 - 21：30。这样的调整，是因为我们希望新的时间（周五晚的晚上）能够方便于更多的朋友加入我们的聚会。 </p>

          <h2>活动主题 </h2>

          <p>按照以往惯例，我们不限主题内容，我们欢迎任何与 Ruby 或者 Web 领域相关的话题或者演讲。我们还在此持续更新我们收集到的演讲主题名称，请大家保持关注。</p>

          <ul>
            <li>hooopo - 《Rails + MySQL 实现数据仓库系统》 </li>
            <li>chanshunli - 《Use Emacs To Write Your Code》 </li>
            <li>jasli2 - 《Realtime Web - The Meteorjs Way》 </li>
            <li>嘉豪 - 《开放数据与 civic hacking》</li>
          </ul>
        </section>
      </section>
      <!-- END panel -->
    </article>
  </div>
</div>
<!-- END activities details info -->

<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- panel: include a search header and a event list -->
<section class="panel select-event">
  <header class="panel-header with-hr pure-g clearfix">
    <h1 class="panel-title pure-u-1">选择你要上传的讲稿所属的活动</h1>
     <form action="" class="pure-form pure-u-1">
       <input type="text" placeholder="搜索活动">
       <button type="submit" class="pure-button"><i class="icon-search"></i></button>
    </form>
    <div class="pure-u-1 panel-tips">
      <span>没有该讲稿的活动？</span>
      <a href="#">点击这里创建</a>
    </div>
  </header>

  <!-- Card list -->
  <ul class="card-list pure-g">
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
    <li class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4 card-list-item">
      <figcaption class="card">
        <header class="card-header">
          <a href="#" class="card-img">
            <img src="/assets/placeholder.png" alt="demo">
          </a>
        </header>
        <footer class="card-footer">
          <figure class="card-title">
            <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
          </figure>
          <time class="card-date">2016年4月11日</time>
        </footer>
      </figcaption>
    </li>
  </ul>
  <!-- END card list -->

</section>
<!-- END panel -->


<del style="display: block; height: 30px; margin: 20px; text-align: center;">*********************************华丽丽的分割线*********************************</del>

<!-- Slide details info -->
<div class="slides-details-page">
  <div class="pure-g">
    <div class="slides-details pure-u-1 pure-u-lg-2-3">
      <div class="slides-content pure-u-1">
        <ol class="slider" id="slider">
          <li class="slides-page">
            <div class="slides-img">
              <img src="/assets/slide.jpg" data-width="1200" data-height="600" alt="">
            </div>
          </li>
          <li class="slides-page">
            <div class="slides-img">
              <img src="/assets/slide.jpg" data-width="1200" data-height="600" alt="">
            </div>
          </li>
          <li class="slides-page">
            <div class="slides-img">
              <img src="/assets/slide.jpg" data-width="1200" data-height="600" alt="">
            </div>
          </li>
          <li class="slides-page">
            <div class="slides-img">
              <img src="/assets/slide.jpg" data-width="1200" data-height="600" alt="">
            </div>
          </li>
        </ol>
        <div class="slider-nav" id="slider_nav">
          <button class="slider-btn slider-prev"></button>
          <span id="currentPage">1</span>/<span id="total_page"></span>
          <button class="slider-btn slider-next"></button>
          <div id="fullscreen"><i class="icon-fullscreen"></i></div>
        </div>

      </div>
      <div class="slides-operate pure-u-1">
        <a href="#" class="btn-default">下载</a>
        <a href="#" class="btn-default btn-warning">喜欢</a>

        <span class="slides-watched"><i class="icon-glass"></i>1903</span>
      </div>
      <article class="slides-info pure-u-1">
        <header class="slides-header clearfix">
          <h1 class="slides-title">JavaScript 中的原型集成以及jQuery源码解读</h1>
          <address class="slides-author"><img src="#" alt="touxiang"> Martin</address>
          <span class="slides-date">发布时间：<time>2015年5月28日</time></span>
          <span class="slides-belong">所属活动：<span>GZRuby</span></span>
        </header>
        <section class="slides-intro">
          <header>
            <h2>内容简介：</h2>
          </header>
          <p>本次讲稿是在去年12月份跟中山大学的同学做技术分享前准备的，其中主要介绍了 Javascript 中的原型继承以及 jQuery 中原型继承的例子以及其他元编程的代码解读（其中标注了代码所在文件及行数）。</p>
          <footer>
            <div class="slides-tags">
              标签：<a href="#" class="slides-tag">Ruby</a>
            </div>
          </footer>
        </section>
      </article>
    </div>
    <aside class="slides-recommend md-hidden pure-u-1 pure-u-lg-1-3">
      <header>推荐讲稿</header>
      <ul class="card-list pure-g">
        <li class="pure-u-1 card-list-item">
          <figcaption class="card">
            <header class="card-header">
              <a href="#" class="card-img">
                <img src="/assets/placeholder.png" alt="demo">
              </a>
            </header>
            <footer class="card-footer">
              <figure class="card-title">
                <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
              </figure>
            </footer>
          </figcaption>
        </li>
        <li class="pure-u-1 card-list-item">
          <figcaption class="card">
            <header class="card-header">
              <a href="#" class="card-img">
                <img src="/assets/placeholder.png" alt="demo">
              </a>
            </header>
            <footer class="card-footer">
              <figure class="card-title">
                <a href="#">我是长标题我是长标题我是长标题我是长标题我是长标题我是长标题</a>
              </figure>
            </footer>
          </figcaption>
        </li>
      </ul>
    </aside>
  </div>
</div>
<!-- END Slide details info -->


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">
    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
      </button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
      </button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>
